<!--
 * @Descripttion: 详情弹框(查看、编辑、删除)
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2021-05-08 09:14:57
-->
<template>
  <el-form
    ref="form1"
    :model="form"
    label-width="120px"
    label-position="right"
    class="form-wrapper"
    :disabled="status==='r'"
  >
    <el-form-item label="卧室数量" prop="bedRoomNum" verify>
      <el-select
        v-model="form.bedRoomNum"
        placeholder="请选择"
        style="width: 100%"
        @change="onRoomCountChange"
      >
        <el-option
          v-for="item in options.roomCount"
          :key="item.dataValue"
          :label="item.dataName"
          :value="item.dataValue"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <template v-if="form.bedRoomInfo && form.bedRoomInfo.length > 0">
      <div
        class="room-bed-wrap"
        v-for="(its, idx) in form.bedRoomInfo"
        :key="idx"
      >
        <h2>卧室{{ idx + 1 }}</h2>
        <el-form-item label="床具数量" :prop="`bedRoomInfo.${idx}.bedNum`" verify>
          <el-select
            v-model="its.bedNum"
            placeholder="请选择"
            style="width: 100%"
            @change="onRoomBedCountChange(its.bedNum, its)"
          >
            <el-option
              v-for="item in options.roomBedCount"
              :key="item.dataValue"
              :label="item.dataName"
              :value="item.dataValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <template v-if="its.bedData && its.bedData.length > 0">
          <div
            v-for="(its1, idx1) in its.bedData"
            :key="idx1"
            class="split-area"
          >
            <el-row :gutter="1">
              <el-col :span="11">
                <el-form-item label="床具类型" :prop="`bedRoomInfo.${idx}.bedData.${idx1}.bedType`" verify>
                  <el-select
                    v-model="its1.bedType"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                  >
                    <el-option
                      v-for="item in dict.room_bed_type"
                      :key="item.dataValue"
                      :label="item.dataName"
                      :value="item.dataValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="床具宽度" :prop="`bedRoomInfo.${idx}.bedData.${idx1}.bedWidth`" verify>
                  <el-select
                    v-model="its1.bedWidth"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                  >
                    <el-option
                      v-for="item in dict.room_bed_width"
                      :key="item.dataValue"
                      :label="item.dataName"
                      :value="item.dataValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align:center">
                <strong>床具{{ idx1 + 1 }}</strong>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
    </template>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
        };
      },
    },
    status : {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  data() {
    return {
      // 默认字典配置
      options: {
        // 卧室数量
        roomCount: null,
        // 床具数量
        roomBedCount: null
      },
    };
  },
  watch: {
    form: {
      handler(nv, ov) {
        if (nv) {
          if (!this.form.bedRoomNum) {
            this.$set(this.form, "bedRoomNum",1);
            this.onRoomCountChange(1)
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.createRoomCount();
      this.createRoomBedCount();
    },
    createRoomCount() {
      let temp = [];
      for (let i = 1; i < 11; i++) {
        temp.push({
          dataName: String(i),
          dataValue: String(i),
        });
      }
      this.$set(this.options, "roomCount", temp);
    },
    createRoomBedCount() {
      let temp = [];
      for (let i = 1; i < 9; i++) {
        temp.push({
          dataName: String(i),
          dataValue: String(i),
        });
      }
      this.$set(this.options, "roomBedCount", temp);
    },
    onRoomCountChange(nv) {
      let temp = [];
      for (let i = 0; i < nv; i++) {
        temp.push({
          bedNum: "1",
          bedData : [
            {
              bedType: null,
              bedWidth : null,
            },
          ],
        });
      }
      this.$set(this.form, "bedRoomInfo", temp);
    },
    onRoomBedCountChange(v1, v2) {
      let temp = [];
      for (let i = 0; i < v1; i++) {
        temp.push({
          bedType : null,
          bedWidth: null,
        });
      }
      this.$set(v2, "bedData", temp);
    },
  },
};
</script>

<style lang="scss" scoped>
.room-bed-wrap {
  background-color: #fcfcfc;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  box-shadow: 1px 2px 4px #ccc;
  h2 {
    font-size: 15px;
  }
  .split-area {
    padding: 12px 0 12px 0;
    strong {
      line-height: 36px;
    }
  }
}
</style>